<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> body, ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .box {
        width: 400px;
        margin: 50px auto;
        border: 1px solid #000;
        padding: 20px;
    }

    .tab-menu {
        height: 30px;
        background: pink;
        padding: 20px 0;
    }

    .tab-menu li {
        float: left;
        font: 12px/30px Arial;
        background: blue;
        color: #fff;
        width: 100px;
        text-align: center;
        border-radius: 6px 6px 0 0;
        margin: 0 16px;
        cursor: pointer;
    }

    .tab-menu .active {
        background: gold;
    }

    .tab-content {
        margin-top: 20px;
        border: 1px solid #666;
    }

    .tab-content li {
        font: 40px/200px ARial;
        text-align: center;
        display: none;
    }

    .tab-content .show {
        display: block;
    } </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="box">
    <ul class="tab-menu">
        <li class="active">选项卡菜单1</li>
        <li>选项卡菜单2</li>
        <li>选项卡菜单3</li>
    </ul>
    <ul class="tab-content">
        <li class="show">选项卡内容1</li>
        <li>选项卡内容2</li>
        <li>选项卡内容3</li>
    </ul>
</div>
<script type="text/javascript">
    $('.tab-menu').find('li').mouseover(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('.tab-content').find('li').eq($(this).index()).addClass('show').siblings().removeClass('show');
    })
</script>
</body>
</html>
